<template>
  <el-col>
    <el-row>
      <el-col :span="5" v-if="hospitalId === 'null'">
        <el-select v-model="query.hospitalId" placeholder="医院" @change="changeHospitalId">
          <el-option v-for="(item, index) in hospitalList" :key="index" :value="item.hospitalId"
            :label="item.name"></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select v-model="query.sectionId" placeholder="科室" @change="changeSectionId">
          <el-option v-for="(item, index) in sectionList" :key="index" :value="item.sectionId"
            :label="item.name"></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-button @click="openModify = !openModify">排班</el-button>
      </el-col>
    </el-row>
    <el-calendar v-model="value">
      <template slot="dateCell" slot-scope="{ date, data }">
        {{ data.day.split("-").slice(1).join("-") }}
        <div v-if="scheduleList.length !== 0">
          <el-select v-show="data.type === 'current-month' && openModify"
            v-model="scheduleList[parseInt(data.day.split('-')[2]) - 1].userId" placeholder="医生名"
            @change="changeUserId($event, date, scheduleList[parseInt(data.day.split('-')[2]) - 1].oldId)">
            <el-option v-for="(item, index) in userList" :key="index" :value="item.userId"
              :label="item.name"></el-option>
          </el-select>
          <div v-show="data.type === 'current-month' && !openModify">
            排班 :
            {{ scheduleList[parseInt(data.day.split("-")[2]) - 1].name }}
          </div>
        </div>
      </template>
    </el-calendar>
  </el-col>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value: new Date(),

      openModify: false,

      hospitalId: 0,

      scheduleList: [],
      userList: [],
      hospitalList: [],
      sectionList: [],

      scheduleDate: [],

      query: {
        hospitalId: "",
        sectionId: "",
      },
    };
  },
  methods: {
    doSelectUserId(val) {
      this.$store
        .dispatch("user/allId", {
          roleId: val === 0 ? 4 : 3,
          hospitalId: this.query.hospitalId,
          sectionId: this.query.sectionId,
        })
        .then((res) => {
          this.userList.push({
            userId: 0,
            name: "空班",
          });
          this.userList = [...this.userList, ...res]
          console.log(this.userList)
        });
    },
    doSelectAllHospital() {
      this.$store.dispatch("hospital/allId", {}).then((res) => {
        this.hospitalList = res;
      });
    },
    doSelectAllSection(val) {
      this.$store
        .dispatch("section/allId", {
          hospitalId: val,
        })
        .then((res) => {
          this.sectionList = res;
          this.sectionList.push({
            name: '护士',
            sectionId: 0
          })
        });
    },
    doSelectAllSchedule() {
      if (this.query.hospitalId === "" || this.query.sectionId === "") {
        return;
      }
      this.$store
        .dispatch("schedule/selectAll", {
          obj: {
            hospitalId: this.query.hospitalId,
            sectionId: this.query.sectionId,
            startTime: this.calculateDate(this.value),
          },
          page: 0,
          pageSize: 0,
        })
        .then((res) => {
          this.scheduleList = res;
        });
    },
    calculateDate(value) {
      var year = value.getFullYear();
      var month = value.getMonth() + 1;

      if (month < 10) {
        return year + "-0" + month + "-01";
      }
      return year + "-" + month + "-01";
    },
    formatDate(value) {
      var year = value.getFullYear();
      var month = value.getMonth() + 1;
      var day = value.getDate()

      if (month < 10) {
        month = "0" + month
      }

      if (day < 10) {
        day = "0" + day
      }

      return year + "-" + month + "-" + day
    },

    changeHospitalId(val) {
      this.query.sectionId = "";
      this.doSelectAllSection(val);
    },
    changeSectionId(val) {
      this.doSelectUserId(val);
      this.doSelectAllSchedule();
    },
    changeUserId(val, date, userId) {
      this.$store
        .dispatch("schedule/schedule", {
          userId: val,
          date: this.formatDate(date),
          oldId: userId
        })
        .then((res) => {
          this.scheduleList = res;
        });
    },

    createScheduleDate() {
      for (var i = 0; i < 31; i++) {
        this.scheduleDate.push("");
      }
    },
  },
  created() {
    this.hospitalId = localStorage.getItem('hospitalId') === "null" ? 'null' : parseInt(localStorage.getItem('hospitalId'))
    if (this.hospitalId === "null") {
      this.doSelectAllHospital();
    } else {
      this.query.hospitalId = this.hospitalId
      this.doSelectAllSection(this.hospitalId)
    }
    this.doSelectAllSchedule();
    this.createScheduleDate();
  },
  watch: {
    value: function (newValue, oldValue) {
      this.doSelectAllSchedule();
    },
    openModify: function (newValue, oldValue) {
      this.doSelectAllSchedule();
    }
  },
};
</script>

<style scoped>

</style> 